<template>
  <div>
    <!-- :scroll="widthAndHeight" -->
    <a-table
      row-key="id"
      :dataSource="dataSource"
      :columns="columns"
      :pagination="pagination"
      :row-selection="rowSelection"
      :customRow="tableCustomRow"
      @change="onTableChange"
    >
      <template #bodyCell="{ column, record }">
        <OdooWidget :node="column" :formInfo="{ ...treeInfo, record }" />
      </template>
    </a-table>
  </div>
</template>

<script setup>
import OdooWidget from '@/odoojs-antdv/OWidget/OdooWidget.vue'

defineProps(['treeInfo', 'dataSource', 'columns', 'pagination', 'rowSelection'])
const emit = defineEmits(['row-click', 'change'])

function tableCustomRow(record) {
  return {
    // eslint-disable-next-line no-unused-vars
    onClick: event => {
      // console.log('click row ', record)
      emit('row-click', record)
    }
  }
}

async function onTableChange(pagination, filters, sorter) {
  // console.log(pagination, sorter)

  const { field, order } = sorter
  const order2 = !order ? '' : order === 'descend' ? `${field} desc` : field

  // console.log([order2])
  emit('change', { ...pagination, order: order2 })
}

// const tableHeight = ref(0)
// onMounted(() => {
//   tableHeight.value = document.body.scrollHeight - 345
//   window.onresize = () => {
//     tableHeight.value = document.body.scrollHeight - 345
//   }
// })

// const widthAndHeight = computed(() => {
//   return { x: 600, y: tableHeight.value }
// })
</script>

<style type="text/css">
.ant-table-thead > tr > th {
  /* background: palegreen; */
  padding: 8px;
}
.ant-table-tbody > tr > td {
  /* background: palegreen; */
  padding: 5px;
}
</style>
